<template>
  <div class="nickname">
    <div class="head-top">
      <mt-header title="昵称">
        <router-link to="/set" slot="left">
          <mt-button icon="back"></mt-button>
        </router-link>
        <mt-button @click="ModifyName" slot="right">保存</mt-button>
      </mt-header>
    </div>
    <div class="inputs">
      <input type="text" v-model="uName" maxlength="10"/>
    </div>

  </div>
</template>

<script>
import baseurl from "./../../../api/baseurl.js";
import {Toast} from "mint-ui"
export default {
  name: "nickname",
  data() {
    return {
      uName: "",
      userid: ""
    };
  },
  created() {
    var str = localStorage.getItem("userid"); //取回students变量
    this.userid = JSON.parse(str); //把字符串转换成JSON对象
    this.getinfo();
  },
  methods: {
    getinfo() {
      this.$http({
        method: "post",
        url: baseurl.urls + "/userhead/selectUserhead",
        params: {
          userid: this.userid
        }
      })
        .then(response => {
          if (response.status == 200) {
            this.uName = response.data.date.userName;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    ModifyName() {
      if(this.uName.length>10){
        Toast("名字过长")
        return;
      }
      const params = new URLSearchParams();
      params.append("userid", this.userid);
      params.append("username", this.uName);
      params.append("userportrait", "");
      this.$http({
        method: "post",
        url: baseurl.urls + "/userhead/updateUserhead",
        data: params
      })
        .then(response => {
          if (response.status == 200) {
            console.log(response);
            Toast("修改成功");
          }
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>

<style scoped>
.nickname .head-top {
  margin-bottom: 18px;
}

.nickname .inputs input {
  box-sizing: border-box;
  width: 100%;
  height: 60px;
  padding: 0 10px;
  border: none;
}

.mint-button-text {
  margin-bottom: 18px;
}
/*head style*/

.mint-header {
  height: 44px;
  background-color: #e60012;
  font-size: 18px;
}

.mint-cell {
  min-height: 60px;
}

.mint-cell-value .explain {
  margin-right: 10px;
}
</style>